//申请管理的  table

import React, { Component } from 'react';
import { Icon, Table, Tag, Drawer } from 'antd';

const { Column } = Table;

// const data = [];
// for (let i = 0; i < 50; i++) {
//   data.push({
// 		key: i,
//     name: `张华${i}`,
//     phone: 13856095924,
//     zcTime: '2018-12-09 10:49:02',
//     sqTime:'2018-12-08 17:17:44',
//     tg:'渠道01',
//     sqMoney:1500,
//     sqqx:6,
//     jqCount:0,
//     sqCount:1,
//     fc:60,
//     shfs:'人工审核',
//     shState:['待人工审核'],
//     shPerson:'王梅',
//     MOPerson:'-',
//     shResult:['拒绝'],
//     cz:['立即领取'],
//     qx:['取消']
//   });
// }

class TableInfo extends Component {
  state = { 
    visible: false,
    pagination: {
      total: this.props.data.length,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total) => {
        return `共 ${total} 条`;
      }
    } 
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

  handleClick = () => {
    console.log(1);
  }

	render() {
		return (
      <div className="info-table">
        <Table size="small" pagination={ this.state.pagination } rowClassName={this.setRowClassName} bordered dataSource={this.props.data}>
          <Column title='姓名' align='center' dataIndex='name' width='60' />
          <Column title='手机号' align='center' dataIndex='phone' width='60' />
          <Column title='注册时间' align='center' dataIndex='zcTime' width='150' />
          <Column title='申请时间' align='center' dataIndex='sqTime' width='150' />
          <Column title='推广来源' align='center' dataIndex='tg' width='80' />
          <Column title='申请金额' align='center' dataIndex='sqMoney' width='80' />
          <Column title='申请期限' align='center' dataIndex='sqqx' width='80' />
          <Column title='借款次数' align='center' dataIndex='jqCount' width='80' />
          <Column title='申请次数' align='center' dataIndex='sqCount' width='80' />
          <Column title='蜂巢分' align='center' dataIndex='fc' width='70' />
          <Column title='审核方式' align='center' dataIndex='shfs' width='80' />
          <Column title='审核状态' align='center' dataIndex='shState' width='80' 
            render={shState => (
            <span>
              <Tag color="orange" key={shState}>{shState}</Tag>
            </span>
            )} />
          <Column title='审核专员' align='center' dataIndex='shPerson' width='80' />
          <Column title='MO专员' align='center' dataIndex='MOPerson' width='80' />
          <Column title='审核结果' align='center' dataIndex='shResult' width='80' 
            render={shResult => (
              <span>
                <Tag color="orange" key={shResult}>{shResult}</Tag>
              </span>
            )} />
          <Column title='操作' align='center' dataIndex='cz' width='80' 
          render={cz => (
            <span>
              {cz.map(cz => <Tag size="small" color="blue" key={cz} onClick={this.showDrawer}><Icon type='eye' /></Tag>)}
              {cz.map(cz => <Tag color="orange" key={cz}>{cz}</Tag>)}
            </span>
          )} />
        </Table>
        <Drawer
          title="用户信息"
          placement="right"
          width="90%"
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </div>
		);
	}
}
    
export default TableInfo;